<script setup lang="ts">
import {ref, reactive, PropType, computed} from 'vue'
import {FormRules, ElMessage} from 'element-plus'
import {FromItem} from '@/components/dFrom/dFrom'
import dDialog from '@/components/dDialog/dDialog.vue'
import dFrom from '@/components/dFrom/dFrom.vue'
import {UserEdit, UserSave, userSave, useredit} from '@/api/baseSetting/accountManager'
import {SeleteData} from '@/api/config'
import {
  NoNumber,
  NotLeadingAndTrailingSpaces,
  Alphanumeric,
  PhoneNumber
} from '@/util/common'
import useUser from '@/store/user'
const props = defineProps({
  //显示
  showDialog: {
    type: Boolean,
    required: true
  },
  //标题
  title: {
    type: String,
    required: true
  },
  btnData: {
    type: Object as PropType<UserEdit | UserSave>,
    required: true
  },
  postSeleteData: {
    type: Array as PropType<Array<SeleteData>>,
    required: true
  },
  roleSeleteData: {
    type: Array as PropType<Array<SeleteData>>,
    required: true
  }
})

const resetFieldsFlag = ref(false)
//禁用
const formDisabled = ref(false)
const onOpen = () => {
  resetFieldsFlag.value = !resetFieldsFlag.value
}
const emits = defineEmits(['close', 'refresh'])
const showSaveLoading = ref(false)
// /[\u4e00-\u9fa5]/ 中文字符
const rules = reactive<FormRules>({
  password: [
    {required: true, message: '请输入密码', trigger: ['change', 'blur']}
  ],
  username: [
    {
      required: true,
      message: '请输入姓名',
      trigger: ['change', 'blur']
    },
    {
      message: '长度应不超过20个字符',
      trigger: ['change', 'blur'],
      max: 20
    },
    {
      message: '请输入汉字、字母、字符',
      pattern: NoNumber,
      trigger: ['change', 'blur']
    },
    {
      message: '首尾不能为空格',
      pattern: NotLeadingAndTrailingSpaces,
      trigger: ['change', 'blur']
    }
  ],
  phone: [
    {required: true, message: '请输入联系电话', trigger: ['change', 'blur']},
    {
      required: true,
      message: '长度应是11位',
      trigger: ['change', 'blur'],
      max: 11
    },
    {
      required: true,
      message: '请输入正确的联系电话',
      pattern: PhoneNumber,
      trigger: ['change', 'blur']
    }
  ]
})
//表单数据
const btnForm = computed(() => {
  return props.btnData
})
//表单项

const fromItems = ref<Array<FromItem>>([
  {
    label: '用户名',
    prop: 'username',
    placeholder: '请输入姓名',
    type: 'input',
    enterSubmit: true
  },
  {
    label: '联系电话',
    prop: 'phone',
    placeholder: '请输入联系电话',
    type: 'input',
    enterSubmit: true
  },
  {
    label: '密码',
    prop: 'password',
    placeholder: '请输入密码',
    type: 'input',
    enterSubmit: true
  }
])
//表单清除控制
const validateFlag = ref(false)

const onCancel = () => {
  emits('close')
}
const onClose = () => {
  emits('close')
  //关闭后清除表单数据以及表单验证数据 可根据具体业务自行调整
  resetFieldsFlag.value = !resetFieldsFlag.value
}

//表单验证通过事件
const onSubmit = () => {
  showSaveLoading.value = true
  if (btnForm.value.id) {
    btnForm.value.job = btnForm.value.job || null
    useredit(btnForm.value as UserEdit)
      .then(() => {
        showSaveLoading.value = false
        ElMessage.success('修改成功')
        // useUser.setup().store.getUseInfor(true)
        emits('close')
        emits('refresh')
      })
      .catch((error) => {
        showSaveLoading.value = false
        console.error(error)
      })
  } else {
    userSave(btnForm.value as UserSave)
      .then(() => {
        showSaveLoading.value = false
        ElMessage.success('新增成功')
        emits('close')
        emits('refresh')
      })
      .catch((error) => {
        showSaveLoading.value = false
        console.error(error)
      })
  }
}
const onConfirm = () => {
  validateFlag.value = !validateFlag.value
}
</script>
<template>
  <d-dialog
    :title="title"
    :show-dialog="showDialog"
    :show-save-loading="showSaveLoading"
    :hide-save-btn="formDisabled"
    :width="600"
    @cancel="onCancel"
    @confirm="onConfirm"
    @open="onOpen"
    @close="onClose"
  >
    <d-from
      label-position="right"
      class="d-form-input-w-2"
      :label-width="80"
      :form-line-num="1"
      :reset-fields-flag="resetFieldsFlag"
      :validate-flag="validateFlag"
      :rules="rules"
      :form-data="btnForm"
      :form-items="fromItems"
      @submit="onSubmit"
    />
  </d-dialog>
</template>

<style scoped></style>
